<script>
import axios from "axios";
import {defineComponent} from "vue";
import {ElMessage} from "element-plus";
import md5 from "js-md5"
axios.defaults.baseURL = 'http://localhost:8080/boss'
export default defineComponent({
  name: "AdminLogin",
  data(){
    return{
      LoginSubmitForm:{},
      LoginFormRules:{
        loginName:[
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:5,max:20,message:'用户名长度在5~20之间'}
        ],
        passWord:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:6,max:6,message:'密码长度为6位'}
        ]
      }
    }
  },
  methods:{
    returnLogin(){
      this.$router.push("/")
    },
    submitLoginForm(){
      this.$refs.loginFormRef.validate((isValid)=>{
        if(isValid){
          let LoginForm = {
            loginName:this.LoginSubmitForm.loginName,
            passWord:this.LoginSubmitForm.passWord
          }
          LoginForm.passWord=md5(LoginForm.passWord)
          axios.post('/operator/LoginCheck',LoginForm).then(resp=>{
            console.log(resp)
            if(resp.data.code===200){
              ElMessage({
                showClose:true,
                message:resp.data.msg,
                center:true,
                type:"success"
              })
              //保存Jwt
              window.sessionStorage.setItem('BOSS_TOKEN',JSON.stringify(resp.data.info))
              //跳转页面
              this.$router.push("/FrameView")
            }else{
              ElMessage({
                showClose:true,
                message:resp.data.msg,
                center:true,
                type:"error"
              })
            }
          })
        }else{
          ElMessage({
            showClose:true,
            message:"请正确输入内容",
            center:true,
            type:"error"
          })
        }
      })
    }
  }
})
</script>

<template>
  <div class="container">
    <div class="form-wrapper">
      <div class="header">管理员登录</div>
      <el-form
          ref="loginFormRef"
          label-width="auto"
          :model="LoginSubmitForm"
          :rules="LoginFormRules"
      >
        <el-form-item prop="loginName">
          <el-input type="text" v-model="LoginSubmitForm.loginName" placeholder="用户名" size="large"/>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input type="password" v-model="LoginSubmitForm.passWord" placeholder="密码" size="large"/>
        </el-form-item>
        <el-form-item label=" ">
          <el-button size="large" color="#000000" round @click="submitLoginForm">登录</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <el-button size="large" color="#000000" round>注册</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <el-button text @click="returnLogin">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<style scoped>
.header{
  margin:20% auto;
  position: absolute;
  left: 30%;
  font-size:30px;

}
.el-form{
  margin: 50% auto;
  max-width: 300px;

}
.el-input{
  padding: 10px;
  font-size: 15px;
}
.title{
  margin: auto;
  position: absolute;
  top:20%;
  left: 45%;
  font-size: 50px;
}
.el-button{
  width: 280px;
  margin-top: 10px;
}
.container{
  height: calc(100vh);
  width: 100%;
}
.form-wrapper{
  width: 371px;
  height: 600px;
  border-radius: 20px;
  border:1px gray solid;
  margin: auto;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
</style>
